<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"><title>关注区域分析报告</title><!--引入echarts.js-->
    <#--<#include "../../include/head-file.ftl">-->
    <script type="text/javascript" src="${base}/static/plugins/jquery/3.2.1/jquery-3.2.1.min.js"></script>
    <script src="${base}/static/plugins/echarts.4.2.1/echarts.min.js"></script>
    <script src="${base}/static/report/map-echarts/hainan.json"></script>
</head>
<body>
<div style="font-weight: bold; font-size: 20px; margin-top: 20px"> 一、关注区域分布概况 </div>
<div id="focus-area-city-desc" style="text-indent: 2em;font-size:20px;margin-top: 20px;line-height: 35px;">
    <!-- 截至目前，关注区域总数共x个，其中关注景区有x个，关注的交通枢纽有x个，未分类的其他区域共x个，下图所示为关注区域在海南省内各市县分布情况。-->
</div>
<div id="map" style="width: 1000px; height: 500px; margin: 0 auto; margin-top: 20px"></div>

<script>
    (function () {

        $(document).ready(function () {
            // 一、关注区域分布概况
            var mapData = [
                { pubArea: "海口", pubCount: 6 },
                { pubArea: "白沙", pubCount: 565 },
                { pubArea: "陵水", pubCount: 44 },
            ];
            var labelArr = $.map(mapData, function(n, i){ return n.pubArea });
            var countArr = $.map(mapData, function(n, i){ return n.pubCount });
            var outdata = $.map(mapData, function(n, i){
                return {
                    name: n.pubArea,
                    value: n.pubCount
                }
            });
            var option = {
                tooltip: {
                    show: true,
                    formatter: function (params) {
                        if (params.value) {
                            return (
                                "&nbsp;&nbsp;" +
                                params.name +
                                "&nbsp;&nbsp;&nbsp;" +
                                params.value +
                                "&nbsp;&nbsp;"
                            );
                        } else {
                            return (
                                "&nbsp;&nbsp;" +
                                params.name +
                                "&nbsp;&nbsp;&nbsp;0&nbsp;&nbsp;"
                            );
                        }
                    },
                },
                visualMap: {
                    type: 'piecewise',
                    min: 0,
                    max: 1000,
                    left: 20,
                    bottom: 0,
                    showLabel: !0,
                    padding: [15, 10],
                    backgroundColor: "transparent", //标题背景色
                    borderColor: "#01698C", //边框颜色
                    color: "#01698C",
                    textStyle: {
                        color: "#000"
                    },
                    borderWidth: 1,
                    pieces: [
                        {
                            gt: 20,
                            label: "20以上",
                            color: "#FF1B00"
                        },
                        {
                            gte: 10,
                            lte: 20,
                            label: "10 - 20",
                            color: "#DE6B00"
                        },
                        {
                            gte: 1,
                            lt: 10,
                            label: "1 - 10",
                            color: "#F1CE2A"
                        },
                        {
                            value: 0,
                            color: "rgba(1,63,77, 0.3)"
                        }
                    ],
                    show: !0
                },
                geo: {
                    map: "hainan",
                    roam: !1,
                    scaleLimit: {
                        min: 1,
                        max: 2
                    },
                    zoom: 1.2,
                    label: {
                        show: true,
                        color: "#fff",
                        fontSize: 12
                    },
                    itemStyle: {
                        normal: {
                            borderColor: "#22A3BE",
                            areaColor: "rgba(1,89,98, 0.2)",
                            borderWidth: 1,
                            shadowBlur: 0.01,
                            shadowColor: "rgba(63, 218, 255, 1)"
                        },
                        emphasis: {
                            areaColor: "rgba(243, 131, 75, 0.8)",
                            shadowOffsetX: 0,
                            shadowOffsetY: 0,
                            borderWidth: 0,
                            shadowBlur: 20,
                            shadowColor: "rgba(0, 0, 0, 0.5)",
                        }
                    },
                },
                series: [
                    {
                        type: "map",
                        map: "hainan",
                        aspectScale: 0.75,
                        zoom: 1.2,
                        label: {
                            normal: {
                                formatter: function (para) {
                                    return "{name|" + para.name + "}";
                                },
                                rich: {
                                    cnNum: {
                                        fontSize: 11,
                                        color: "#333333",
                                        align: "center",
                                    },
                                    name: {
                                        fontSize: 10,
                                        color: "#333333",
                                        align: "center",
                                        lineHeight: 20,
                                    },
                                },
                                //formatter: '{b}',
                                color: "#333333",
                                show: true,
                            },
                            emphasis: {
                                show: false,
                            },
                        },
                        itemStyle: {
                            normal: {
                                areaColor: "#D9EEFF",
                                borderColor: "#fff",
                                borderWidth: 1,
                            },
                            emphasis: {
                                areaColor: "#FFAE00",
                            },
                        },
                        data: ${focusAreaCityCountMap},
                        nameMap: {
                            海口: "海口市",
                            三亚: "三亚市",
                            儋州: "儋州市",
                            五指山: "五指山市",
                            琼海: "琼海市",
                            文昌: "文昌市",
                            万宁: "万宁市",
                            东方: "东方市",
                            定安: "定安县",
                            屯昌: "屯昌县",
                            澄迈: "澄迈县",
                            临高: "临高县",
                            白沙: "白沙黎族自治县",
                            昌江: "昌江黎族自治县",
                            乐东: "乐东黎族自治县",
                            陵水: "陵水黎族自治县",
                            保亭: "保亭黎族苗族自治县",
                            琼中: "琼中黎族苗族自治县",
                            南海诸岛: "三沙市"
                        },
                    },
                ],
            };
            var echartsMap = echarts.init(document.getElementById("map"));
            echarts.registerMap("hainan", hainan);
            echartsMap.setOption(option);
            $("#focus-area-city-desc").text("${focusAreaCityCountMapDesc}");
        })
    })()
</script>

<div style="font-weight: bold; font-size: 20px; margin-top: 20px"> 二、景区用户数TOP5 </div>
<div id="focus-area-scenic-top5-desc" style="text-indent: 2em;font-size:20px;margin-top: 20px;line-height: 35px;">
    <!-- 选取关注区域为景区类型的区域，统计本周累计用户数，用户数量从多到少排行前5的区域如下图所示，区域1累计用户数量为x万，排名第一，其次是区域2，累计用户数量共x万，区域3排名第三，累计用户数量为x万。-->
</div>
<div id="myecharts2" style="width: 1000px; height: 400px; margin: 0 auto; margin-top: 20px"></div>

<script>
    (function () {

        $(document).ready(function () {
            // 二、景区用户数TOP5
            /*var areaData = [{"areaId":"1228","areaName":"三亚凤凰岭海誓山盟景区","areaType":"3","cityId":"2","count":11935,"latitude":"18.310069496753517","longtitude":"109.44931807836515","taskId":"661"},{"areaId":"1276","areaName":"观澜湖旅游度假区","areaType":"3","cityId":"1","count":4833,"latitude":"20.02944174966439","longtitude":"110.3305504021421","taskId":"628"},{"areaId":"1234","areaName":"亚龙湾热带天堂森林旅游区","areaType":"3","cityId":"2","count":3890,"latitude":"18.310069496753517","longtitude":"109.44931807836515","taskId":"639"},{"areaId":"1125","areaName":"骑楼老街","areaType":"3","cityId":"1","count":3768,"latitude":"20.02944174966439","longtitude":"110.3305504021421","taskId":"660"},{"areaId":"1001","areaName":"呀诺达热带雨林","areaType":"3","cityId":"18","count":3503,"latitude":"18.67180545889963","longtitude":"109.69885590528405","taskId":"500"}]*/
            var areaData = ${focusAreaScenicTop5}
            var myecharts2 = echarts.init(document.getElementById("myecharts2"));
            var barXAxisData = $.map(areaData, function(n, i){ return n.areaName });
            var countValues = $.map(areaData, function(n, i){ return n.count });
            var optionBar1 = {
                title: {
                    text: "景区用户数TOP5",
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                },
                color: ['#4b91ff'],
                legend: false,
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true,
                },
                xAxis: {
                    type: "category",
                    data: barXAxisData,
                },
                yAxis: {
                    type: "value",
                    boundaryGap: [0, 0.01],
                    axisLabel: {
                        fontSize: 14,
                        show: true,
                        formatter: function(params) {
                            console.log(params)
                            var result = ''
                            result = params / 10000
                            if (params > 1000) {
                                return result + '万'
                            } else {
                                return params
                            }
                        },
                    },
                },
                series: [
                    {
                        type: "bar",
                        data: countValues
                    }
                ]
            }
            myecharts2.setOption(optionBar1);
            $("#focus-area-scenic-top5-desc").text("${focusAreaScenicTop5Desc}");
        })
    })()
</script>

<div style="font-weight: bold; font-size: 20px; margin-top: 20px"> 三、交通枢纽用户数TOP5 </div>
<div id="focus-area-traffic-top5-desc" style="text-indent: 2em;font-size:20px;margin-top: 20px;line-height: 35px;">
    <!-- 选取关注区域为景区类型的区域，统计本周累计用户数，用户数量从多到少排行前5的区域如下图所示，美兰机场累计用户数量为x万，排名第一，其次是凤凰机场，累计用户数量共x万，海口东站排名第三，累计用户数量为x万。-->
</div>

<div class="echarts-content">
    <div id="echarts-box" class="echarts-box"></div>
    <div class="echarts" id="myecharts3" style="height: 340px;"></div>
</div>

<script>
    (function () {

        $(document).ready(function () {
            // 三、交通枢纽用户数TOP5
            /*var result = [
                {label: '美兰机场美兰机场美兰机场美兰机场', count: 295},
                {label: '啊啊机场', count: 155},
                {label: '火车站美兰机场美兰机场', count: 4511},
                {label: '汽车站美兰机场', count: 425},
                {label: '广场', count: 9945},
            ]*/
            var result = ${focusAreaTrafficTop5}
            var myecharts3 = echarts.init(document.getElementById("myecharts3"));
            var source = []
            for(var i in result) {
                let j = Number(i)+1;
                source[0] = ['product', 'nums'];
                source[j] = [result[i].areaName, result[i].count];
            }
            var series = {
                tooltip: {},
                grid: {
                    left: 0,
                    right: '50px',
                    bottom: '0',
                    top: '0',
                    containLabel: false,
                },
                yAxis: {
                    type: 'category',
                    inverse: true,
                    show: false,
                },
                xAxis: [
                    {
                        show: false,
                        axisLine: {
                            lineStyle: {
                                color: '#999',
                            },
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#000',
                            }
                        }
                    },
                    {
                        show: false,
                        axisLine: {
                            lineStyle: {
                                color: '#999',
                            },
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#000',
                            }
                        }
                    },
                ],
                series: [
                    //x轴
                    {
                        type: 'bar',
                        barGap: '-100%',
                        barWidth: 10,
                        label: {
                            normal: {
                                show: true,
                                textStyle: {
                                    color: '#000',
                                    fontSize: 12
                                },
                                position: 'right',
                            },
                        },
                        encode: {
                            x: 'nums',
                        },
                        tooltip: {}
                    },
                    //y轴
                    {
                        type: 'bar',
                        xAxisIndex: 1, //代表使用第二个X轴刻度
                        barGap: '-100%',
                        barCategoryGap: '10%' ,
                        barWidth: 12,
                        itemStyle: {
                            normal: {
                                barBorderRadius: 0,
                                color:  {
                                    // return '#45b5bd' (params)=>
                                    type: 'linear',
                                    x: 0,
                                    y: 1,
                                    x2: 1,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: '#68d28a' // 0% 处的颜色
                                    }, {
                                        offset: 1, color: '#1f95f5' // 100% 处的颜色
                                    }],
                                    globalCoord: false // 缺省为 false
                                },
                            },
                        },
                        // label: {
                        //   rotate: 40,
                        //   normal: {
                        //     show: true,
                        //     // position: 'insideRight',
                        //     position: [0, '-16'],
                        //     formatter: '{b}',
                        //     textStyle: {
                        //       fontSize: 14,
                        //       color: '#4a4b4b',
                        //     },
                        //   },
                        // },
                        encode: {
                            y: 'product',
                        },
                    },
                ],
                dataset: {
                    source: source,
                },
            };
            myecharts3.setOption(series);
            $.each(result,function(index,item){
                var span='<div class="order"><span>'+(index+1)+'</span><i title='+item.areaName+'>'+item.areaName+'</i></div>';
                $("#echarts-box").append(span)
            });
            $("#focus-area-traffic-top5-desc").text("${focusAreaTrafficTop5Desc}");
        })
    })()
</script>
<style>
    .echarts-content {
        display: flex;
        position: relative;
        margin: 20px auto 0;
        width: 910px;
    }
    .echarts-content .echarts-box {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
    }
    .echarts-content .echarts-box > .order {
        display: flex;
        align-items: center;
        flex: 1;
    }

    .echarts-content .echarts-box > .order > i {
        font-style: normal;
        flex: 0 0 126px;
        padding-left: 1em;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .echarts-content .echarts-box > .order > span {
        flex: 0 0 26px;
        background-color: #a8a8a8;
        color: #fff;
        text-align: center;
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    .echarts-content .echarts-box > .order:nth-child(1) > span{
        background-color: #f10000;
    }
    .echarts-content .echarts-box > .order:nth-child(2) > span {
        background-color: #ff9502;
    }
    .echarts-content .echarts-box > .order:nth-child(3) > span {
        background-color: #7f7f7f;
    }
    .echarts-content .echarts-box > .order:last-child > span {
        margin-bottom: 0;
    }
    .echarts-content .echarts-box > .order::before > span {
        bottom: 0;
        content: '';
        position: absolute;
        display: inline-block;
        width: 100%;
        height: 5px;
        background-color: #fff;
    }
    .echarts-content .echarts {
        flex: 1;
        margin-left: 180px;
    }
</style>

<div style="font-weight: bold; font-size: 20px; margin-top: 20px"> 四、其他区域用户数TOP5 </div>
<div id="focus-area-other-top5-desc" style="text-indent: 2em;font-size:20px;margin-top: 20px;line-height: 35px;">
    <!-- 选取关注区域为其他类型的区域，统计本周累计用户数，用户数量从多到少排行前5的区域如下图所示，区域1累计用户数量为x万，排名第一，其次是区域2，累计用户数量共x万，区域3排名第三，累计用户数量为x万。-->
</div>
<div id="myecharts4" style="width: 1000px; height: 400px; margin: 0 auto; margin-top: 20px"></div>

<script>
    (function () {

        $(document).ready(function () {
            // 四、其他区域用户数TOP5
            /*var areaData = [
                { area: "海口", count: 6 },
                { area: "白沙", count: 565 },
                { area: "陵水", count: 44 },
                { area: "三亚", count: 221 },
                { area: "琼海", count: 41 },
                { area: "文昌", count: 400 },
                { area: "万宁", count: 144 },
                { area: "东方", count: 94 },
                { area: "儋州", count: 664 },
            ];*/
            var areaData = ${focusAreaOtherTop5}
            var myecharts4 = echarts.init(document.getElementById("myecharts4"));
            var barYAxisData = $.map(areaData, function(n, i){ return n.areaName  })
            var barValues = $.map(areaData, function(n, i){ return n.count })
            var optionBar2 = {
                title: {
                    text: "其他区域用户数TOP5",
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                },
                color: ['#4b91ff'],
                legend: false,
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true,
                },
                xAxis: {
                    type: "category",
                    data: barYAxisData,
                },
                yAxis: {
                    type: "value",
                    boundaryGap: [0, 0.01],
                    axisLabel: {
                        fontSize: 14,
                        show: true,
                        formatter: function(params) {
                            console.log(params)
                            var result = ''
                            result = params / 10000
                            if (params > 1000) {
                                return result + '万'
                            } else {
                                return params
                            }
                        },
                    },
                },
                series: [
                    {
                        type: "bar",
                        data: barValues
                    }
                ]
            }
            myecharts4.setOption(optionBar2);
            $("#focus-area-other-top5-desc").text("${focusAreaOtherTop5Desc}");
        })
    })()
</script>

<div style="font-weight: bold; font-size: 20px; margin-top: 20px"> 五、各区域用户变化情况</div>
<div style="width: 1000px;margin: 16px auto;overflow: hidden;">
    <select id="fa_area_id" style="float: right;padding: 5px;min-width: 100px;"></select>
</div>
<div id="table5-desc-1" style="text-indent: 2em;font-size:20px;margin-top: 20px;line-height: 35px;">
    <!-- 本周累计用户数为x人，其中常住用户数为x人，流动用户数为x人，特定用户数为x人，外省用户数为x人，境外用户数为x人，占比如下图所示。-->
</div>
<div id="myecharts5-1" style="width: 600px; height: 340px; margin: 0 auto; margin-top: 20px"></div>
<div id="table5-desc-2" style="text-indent: 2em;font-size:20px;margin-top: 20px;line-height: 35px;">
    <!-- 下周所示为本周在线用户变化情况，如图所示，本周每日累计在线用户数量峰值出现在x月x日,累计在线用户数量为x人。-->
</div>
<div id="myecharts5-2" style="width: 1000px; height: 400px; margin: 0 auto; margin-top: 20px"></div>

<script>
    (function () {

        $("#fa_area_id").change(function () {
            change()
        })

        var currentUserKeyMap = {
            "mobileUsers": "流动用户数",
            "otherProvincesUsers": "外省用户数",
            "overseasUsers": "境外用户数",
            "permanentUsers": "常住用户数",
            "specificUsers": "特定用户数"
        }
        var focusAreaResponseList = ${focusAreaResponseList}
        var result1 = {
            "三沙市": {
                total: 55,
                data: [
                    { area: "常住用户数", count: 666666 },
                    { area: "流动用户数", count: 111565 },
                    { area: "特定用户数", count: 5544 },
                    { area: "外省用户数", count: 521 },
                    { area: "境外用户数", count: 9941 }
                ],
                des: { v1: 4,v2: 4, }
            },
            "昌江黎族自治县": {
                total: 8888,
                data: [
                    { area: "常住用户数", count: 558 },
                    { area: "流动用户数", count: 11666 },
                    { area: "特定用户数", count: 5544 },
                    { area: "外省用户数", count: 5211 },
                    { area: "境外用户数", count: 994 }
                ],
                des: { v1: 22,v2: 4, }
            }
        };
        var result2 = {
            "三沙市": {
                data: [
                    { date: "05-22", count: 3632 },
                    { date: "05-23", count: 5 },
                    { date: "05-24", count: 5544 },
                    { date: "05-25", count: 521 },
                    { date: "05-26", count: 9941 },
                    { date: "05-27", count: 666 },
                    { date: "05-28", count: 11245 },
                ],
                des: { v1: 11,v2: 4, }
            },
            "昌江黎族自治县":{
                data: [
                    { date: "05-22", count: 32 },
                    { date: "05-23", count: 45 },
                    { date: "05-24", count: 544 },
                    { date: "05-25", count: 21 },
                    { date: "05-26", count: 941 },
                    { date: "05-27", count: 666 },
                    { date: "05-28", count: 11245 },
                ],
                des: { v1: 23,v2: 4, }
            }
        };
        $(document).ready(function () {
            // 五、各区域用户变化情况
            var resultKey = [], resultData1 = [], resultData2 = [], total=0, desObj1 = {}, desObj2 = {}
            /*$.each(result1,function(key, item) {
                resultKey.push(key);
                var option="<option value="+key+">"+key+"</option>";
                $("#areaId").append(option)
            });*/
            $.each(focusAreaResponseList,function(index, item) {
                resultKey.push(item.areaName);
                $("#fa_area_id").append("<option value="+item.areaName+">"+item.areaName+"</option>")
            });
            // 取第一个的值
            /*resultData1 = resultKey.length>0? result1[resultKey[0]].data: [];
            resultData2 = resultKey.length>0? result2[resultKey[0]].data: [];
            desObj1 = resultKey.length>0? result1[resultKey[0]].des: {};
            desObj2 = resultKey.length>0? result2[resultKey[0]].des: {};
            total = resultKey.length>0? result1[resultKey[0]].total: 0;*/
            // 图一
            // initEcharts1(resultData1, desObj1, total);
            initEcharts1(focusAreaResponseList[0]);
            // 图二
            // initEcharts2(resultData2, desObj2)
            initEcharts2(focusAreaResponseList[0])
        });
        // 各区域用户变化情况图一
        function initEcharts1(datas) {
            $("#table5-desc-1").text(datas.descP1);
            var myecharts5_1 = echarts.init(document.getElementById("myecharts5-1"));
            var source = $.map(datas["currentUser"], function(v, k){
                if (k !== 'keyUsers' && k !== 'createTime' && k !== 'totalUsers') {
                    return {
                        product: currentUserKeyMap[k],
                        count: v,
                    }
                }
            });
            var hollowCenterText = '本周总数\n\n'+(datas["currentUser"]["totalUsers"]?datas["currentUser"]["totalUsers"]:0);
            var optionPie = {
                tooltip: {
                    show: true,
                    trigger: 'item',
                    formatter: '{b}: {d}%'
                },
                color: ['#3aa0ff', '#36cbcb', '#4dcb73', '#fad337', '#f2637b', '#975fe4'],
                legend: {
                    show: true,
                    orient: 'vertical', // horizontal水平 vertical垂直
                    padding: [0, 0],
                    icon: 'circle',
                    right: 10,
                    top: 'middle',
                    formatter: function(name) {
                        for (var i = 0, l = source.length; i < l; i++) {
                            if (source[i].product == name) {
                                var count = source[i].count?source[i].count + '   ': '0'
                                return name + '   ' + count
                            }
                        }
                    },
                },
                series: [
                    {
                        type: 'pie',
                        startAngle: 160,
                        center: ['40%', '50%'],
                        radius: ['55%', '70%'],
                        avoidLabelOverlap: true,
                        minAngle: 0,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            normal: {
                                show: true,
                                position: 'center',
                                color:'#3c3c3c',
                                fontWeight: 'normal',
                                fontStyle: 'normal' ,
                                formatter: (params)=> {
                                    return hollowCenterText
                                },
                                fontSize: 20,
                                textStyle: {
                                    rich: {
                                        a: {
                                            color: '#656565'
                                        },
                                        b: {
                                            color: '#6885F2'
                                        },
                                        c: {
                                            color: '#656565'
                                        }
                                    }
                                },
                                distanceToLabelLine: 0,
                                padding: [-2, 0, 0, 0]
                            },
                        },
                        labelLine: {
                            normal: {
                                show: true,
                                length: 10,
                                length2: 20
                            }
                        }
                    }
                ],
                dataset: {
                    source: source
                }
            }
            myecharts5_1.setOption(optionPie);
        }
        // 各区域用户变化情况图二
        function initEcharts2(datas) {
            $("#table5-desc-2").text(datas.descP2);
            var myecharts5_2 = echarts.init(document.getElementById("myecharts5-2"));
            var lineYAxisData = $.map(datas["areaUserUp"]["sevenDaysList"], function(n, i){ return n.period  });
            var lineValues = $.map(datas["areaUserUp"]["sevenDaysList"], function(n, i){ return n.count });
            var optionLine = {
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "line",
                    },
                },
                color: ['#4b91ff'],
                legend: false,
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "5%",
                    containLabel: false,
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: lineYAxisData,
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        type: "line",
                        data: lineValues,
                        smooth: true,
                        areaStyle: {opacity: 0.2}
                    }
                ]
            }
            myecharts5_2.setOption(optionLine);
        }
        function change() {
            initEcharts1(focusAreaResponseList[document.getElementById("fa_area_id").options.selectedIndex]);
            initEcharts2(focusAreaResponseList[document.getElementById("fa_area_id").options.selectedIndex]);
        }
    })()
</script>

</body>
</html>